<template lang="jade">
.navbar(:style="{backgroundColor: 'rgba(33,150,243, ' + navbarAlpha + ')'}")
  .navbar-inner
    .left
      i.fa.fa-arrow-left
    .right
      i.fa.fa-heart
      i.fa.fa-arrow-right
main(@scroll="scroll()")
  swiper-square-view
  item-detail-head-view
  item-detail-comment-view
  item-list-big-view(:list="itemList")
  news-view

</template>

<script>
  import navbarComponent from 'navbar.vue'
  import toolbarComponent from 'toolbar.vue'
  import swiperSquareView from './swiperSquareView.vue'
  import itemListBigView from 'itemListBig.vue'
  import newsView from 'news.vue'
  import itemDetailHeadView from 'itemDetailHead.vue'
  import itemDetailCommentView from 'itemDetailComment.vue'

  import 'font-awesome-webpack'

  export default {
    name: 'navbarView',
    components: {
      navbarComponent,
      toolbarComponent,
      swiperSquareView,
      itemListBigView,
      newsView,
      itemDetailHeadView,
      itemDetailCommentView
    },
    data() {
      return {
        itemList: [
          {
            img: 'http://img3.imgtn.bdimg.com/it/u=2306489014,2166417261&fm=21&gp=0.jpg',
            title: 'Macbook Pro',
            subtitle: '苹果电脑',
            price: 9800,
            originPrice: 9999
          },
          {
            img: 'http://www.fjlqw.cn/uploads/allimg/160317/1S1194350_0.jpg',
            title: 'iPhone 6',
            subtitle: 'Bigger than bigger',
            price: 4800,
            originPrice: 5000
          }
        ],
        navbarAlpha: 0
      }
    },
    ready: function () {
      var didScroll = false;
      window.onscroll = doThisStuffOnScroll;
      function doThisStuffOnScroll() {
        didScroll = true;
      }
      setInterval(() => {
        if(didScroll) {
          didScroll = false;
          var a = document.body.scrollTop
          var rate = a / (window.innerWidth * 1.5)
          rate = rate > 0.9 ? 0.9 : rate
          this.navbarAlpha = rate
        }
      }, 10);
    }
  }
</script>

<style lang="less" scoped>
  @import "../../src/less/libs/color-vars.less";
  html {
    overflow-x: hidden;
  }
  body {
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
    #app {
      overflow-x: hidden;
      main {
        // margin-top: 50px;
      }
    }
  }
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 50px;
    line-height: 50px;
    // background-color: fade(@themeColor, 10%);
    color: #fff;
    .navbar-inner {
      padding: 0 1rem;
      div {
        display: inline-block;
        width: 50%;
      }
      .right {
        text-align: right;
        i {
          &:first-child {
            margin-right: 1rem;
          }
        }
      }
    }
  }
</style>
